/* eslint-disable react/jsx-pascal-case */
import React from "react";
import cookie from 'react-cookies'
const Recovery = () => {
    let navigate = React.$router.useNavigate();
    // 获取路由传参的方法
    let [searchParams] = React.$router.useSearchParams();
    // 获取路由传参的ID值
    const [id, setId] = React.useState(searchParams.get('leaseid'))
    const [LoginUser, setLoginUser] = React.useState(React.$LoginUser ? React.$LoginUser : {})
    const [info, setInfo] = React.useState({
        product: {},
        business: {}
    })
    // 表单信息
    const [form] = React.$Vant.Form.useForm()
    // 显示物流公司弹窗
    const [isShow, setisShow] = React.useState(false)
    // 物流公司列表
    const [expresslist, setExpresslist] = React.useState([])
    // 物流公司的名称
    const [expressname, setExpressname] = React.useState('')
    // 物流公司的ID
    const [expressid, setExpressid] = React.useState(0)


    React.useEffect(() => {
        getInfoData();
        getExpressData()
    }, [id])

    // 获取订单详情
    const getInfoData = async () => {
        let data = {
            id: id,
            busid: LoginUser.id
        }

        let result = await React.$api.leaseinfo(data)
        if (result && result.code == 1) {
            setInfo(result.data)
        }
    }

    // 获取物流公司
    const getExpressData = async () =>{
        let result = await React.$api.leaselogistics()
        if(result && result.code == 1){
            setExpresslist(result.data)
        }
    }

    // 拔打客服电话
    const ToContact = () => {
        window.location.href = `tel: ${info.tel}`
    }

    // 选择快递公司
    const onConfirm = (index, val) =>
    {
        setisShow(false)
        setExpressname(val.text)
        setExpressid(val.value)
    }

    // 表单提交
    const onFinish = async(values) => {
        let data = {
            busid: LoginUser.id,
            id: id,
            busexpid: expressid,
            busexpcode: values.busexpcode
        }
        let result = await React.$api.leaserecovery(data)
        if(result && result.code == 1){
            React.$Vant.Toast.success({
                message: result.msg,
                onClose: () => {
                    navigate('/business/lease/index')
                }
            })
       } else {
           React.$Vant.Toast.fail({
               message: result.msg
           })
       }
    }

    return (
        <>
            <React.$Vant.NavBar
                fixed
                safeAreaInsetTop
                zIndex="99999"
                title="归还商品"
                onClickLeft={() => navigate('/business/lease/index')}
            />
            <div className="zy_module_content">
                <div className="swiper-container vip_user_order">

                    <div className="swiper-slide">
                        <ul>
                            <li style={{ borderBottom: 'none' }}>
                                <div className="vip_order_goods">
                                    <h3>
                                        <React.$router.NavLink to={`/business/product/info?pid=${info.proid}`}>
                                            <i><img src={info.product.thumbs_text} /></i>
                                            <dl>
                                                <dt>{info.product.name}</dt>
                                                <dd>
                                                    <em>厂家联系人：</em>
                                                    <em>{info.contact}</em>
                                                </dd>
                                                <dd>
                                                    <em>厂家联系电话：</em>
                                                    <em>{info.mobile}</em>
                                                </dd>
                                                <dd>
                                                    <em>归还地址：</em>
                                                    <em>{info.address}</em>
                                                </dd>
                                            </dl>
                                        </React.$router.NavLink>
                                    </h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className="lianxi_ge">
                <div onClick={ToContact}>联系客服</div>
            </div>
            <div className="rem2"></div>
            <div className='recovery'>
                <React.$Vant.Form
                    form={form}
                    onFinish={onFinish}
                >
                    <React.$Vant.Form.Item
                        isLink
                        label='快递公司'
                        onClick={() => setisShow(true)}
                    >
                        <React.$Vant.Field
                            readonly
                            value={expressname}
                            placeholder="请选择快递公司"
                        />
                    </React.$Vant.Form.Item>
                    <React.$Vant.Popup position='bottom' visible={isShow} onClose={() => setisShow(false)}>
                        <React.$Vant.Picker
                            title='快递公司'
                            columns={expresslist}
                            onCancel={() => setisShow(false)}
                            onConfirm={onConfirm}
                        />
                    </React.$Vant.Popup>
                    <React.$Vant.Form.Item
                        rules={[{ required: true, message: '请填写快递单号' }]}
                        name='busexpcode'
                        label='快递单号'
                    >
                        <React.$Vant.Input placeholder='请填写快递单号' />
                    </React.$Vant.Form.Item>
                    <div className="zy_goods_foot dis_flex">
                        <div className="left">
                            <div>退还押金<b>￥<em>{info.rent}</em></b></div>

                        </div>
                        <p>
                            <React.$Vant.Button nativeType='submit' type='info' block>
                                还设备
                            </React.$Vant.Button>
                        </p>
                    </div>
                </React.$Vant.Form>
            </div>
        </>
    )
}

export default Recovery